<template>
    <div class="app-container">
        <el-form ref="elForm" :disabled="$route.query.isInfo || isInfo" :model="formData" :rules="rules" size="medium"
            label-width="120px">
            <h2 style="text-align: center">年度质量监督计划表</h2>
            <h4 class="form-header h4">基本信息</h4>
            <el-row :gutter="15">
                <el-col :span="6">
                    <el-form-item label="年度" prop="year">
                        <el-date-picker :disabled="$route.query.isEdit" format="yyyy" value-format="yyyy"
                            v-model="formData.year" type="year" placeholder="选择年">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <h4 class="form-header h4">
                <el-button type="primary" plain size="mini" 
                    @click="handleAdd">增行</el-button>
                <!-- <el-button type="danger" plain size="mini" @click="handleDele">删行</el-button> -->
            </h4>
            <!-- <el-row :gutter="8">
                <el-col :span="8">
                    <el-form-item label="部门" :rules="rules.deptId">
                        <el-cascader :disabled="$route.query.isEdit" ref="reference" 
                            :props="{ value: 'id', checkStrictly: true, }" :show-all-levels="false" placeholder="请选择部门"
                            v-model="deptId" :options="deptOptions" @change="changeCascaderNums"></el-cascader>
                    </el-form-item>
                </el-col>
            </el-row> -->

            <!-- <el-table :data="formData.contentList" :border="true" style="width: 100%">
                <el-table-column label="序号" type="index" align="center" />
                <el-table-column min-width="200" label="月份" align="center">
                    <template slot-scope="scope">
                        <el-form-item label-width="0" :prop="`contentList.${scope.$index}.month`" :rules="rules.month">
                            <el-select :disabled="$route.query.isEdit" v-model="scope.row.month" filterable
                                placeholder="请选择月份">
                                <el-option label="1月" :value="1" />
                                <el-option label="2月" :value="2" />
                                <el-option label="3月" :value="3" />
                                <el-option label="4月" :value="4" />
                                <el-option label="5月" :value="5" />
                                <el-option label="6月" :value="6" />
                                <el-option label="7月" :value="7" />
                                <el-option label="8月" :value="8" />
                                <el-option label="9月" :value="9" />
                                <el-option label="10月" :value="10" />
                                <el-option label="11月" :value="11" />
                                <el-option label="12月" :value="12" />

                            </el-select>
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column min-width="200" label="部门" align="center">
                    <template slot-scope="scope">
                        <el-form-item label-width="0" :prop="`contentList.${scope.$index}.deptId`" :rules="rules.deptId">
                            <el-cascader :disabled="$route.query.isEdit" ref="reference" :style="{ width: '100%' }"
                                :props="{ value: 'id', checkStrictly: true, }" :show-all-levels="false" placeholder="请选择部门"
                                v-model="scope.row.deptId" :options="deptOptions"
                                @change="changeCascaderNums"></el-cascader>
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column min-width="200" label="监督项目" align="center">
                    <template slot-scope="scope">
                        <el-form-item label-width="0" :prop="`contentList.${scope.$index}.monitorProject`"
                            :rules="rules.monitorProject">
                            <el-input :disabled="$route.query.isEdit" v-model="scope.row.monitorProject"
                                placeholder="请输入监督项目"></el-input>
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column label="监督对象" width="200" align="center">
                    <template slot-scope="scope">
                        <el-form-item label-width="0" :prop="`contentList.${scope.$index}.monitorUserId`"
                            :rules="rules.monitorUserId">
                            <UserDialogSelection :key="" :disabled="$route.query.isInfo || isInfo"
                                @change="changeOpen1($event, scope.$index)" placeholder="请选择监督对象"
                                v-model="scope.row.monitorUserId">
                            </UserDialogSelection>
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column label="监督员" width="200" align="center">
                    <template slot-scope="scope">
                        <el-form-item label-width="0" :prop="`contentList.${scope.$index}.inspectorUserId`"
                            :rules="rules.inspectorUserId">
                            <UserDialogSelection :key="" :disabled="$route.query.isInfo || isInfo"
                                @change="changeOpen($event, scope.$index)" placeholder="请选择监督员"
                                v-model="scope.row.inspectorUserId">
                            </UserDialogSelection>
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column min-width="200" label="备注" align="center">
                    <template slot-scope="scope">
                        <el-form-item label-width="0" :prop="`contentList.${scope.$index}.remark`" :rules="rules.remark">
                            <el-input v-model="scope.row.remark" placeholder="备注"></el-input>
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column min-width="250" label="删行" prop="price" align="center">
                    <template slot-scope="scope">
                        <el-button type="danger" plain size="mini" @click="handleDele(scope.$index)">删行</el-button>
                    </template>
                </el-table-column>
            </el-table> -->
            <table border="1">
                <!-- 表头 -->
                <thead>
                    <tr>
                        <th rowspan="2" style="width: 30mm;height:10mm">部门/月份</th>
                        <th rowspan="12" style="width: 30mm"></th>
                    </tr>
                    <tr>
                        <!-- 表头的月份 -->
                        <!-- <th style="width: 25mm"></th> -->
                        <th style="width: 40mm">1月</th>
                        <th style="width: 40mm">2月</th>
                        <th style="width: 40mm">3月</th>
                        <th style="width: 40mm">4月</th>
                        <th style="width: 40mm">5月</th>
                        <th style="width: 40mm">6月</th>
                        <th style="width: 40mm">7月</th>
                        <th style="width: 40mm">8月</th>
                        <th style="width: 40mm">9月</th>
                        <th style="width: 40mm">10月</th>
                        <th style="width: 40mm">11月</th>
                        <th style="width: 40mm">12月</th>
                    </tr>
                </thead>
                <!-- {{ scope.item.months }} -->
                <!-- 表体 -->
                <tbody v-for="(e, i) in formData.items">
                    <!-- <div > -->
                    <!-- 第一行部门数据，每4行合并为一个单元格 -->
                    <tr>
                        <td rowspan="4">
                            <!-- <el-form-item label-width="0" :prop="`items.${i}.deptId`" :rules="rules.deptId">
                                <el-cascader :disabled="$route.query.isEdit" :props="{ value: 'id', checkStrictly: true }"
                                    :show-all-levels="false" :ref="'reference' + i" placeholder="请选择部门"
                                    :style="{ width: '100%' }" @change="changeCascaderNums($event, i)" v-model="e.deptId"
                                    :options="deptOptions"></el-cascader>
                            </el-form-item> -->
                            <el-form-item label-width="0" :prop="`items.${i}.deptId`" :rules="rules.deptId">
                                <el-cascader :ref="'reference' + i" :style="{ width: '100%' }"
                                    :props="{ value: 'id', checkStrictly: true, multiple: true }" :show-all-levels="false"
                                    placeholder="请选择部门" v-model="e.deptId" :options="deptOptions"
                                    @change="changeCascaderNums($event, i)"
                                    @visible-change="visibleChange($event, i)"></el-cascader>
                            </el-form-item>
                        </td>
                        <td>监督项目</td>
                        <td style="width: 35mm;"> <el-form-item label-width="0" :prop="`items.${i}.oneMonitorProject`"
                                :rules="rules.oneMonitorProject">
                                <el-input :disabled="$route.query.isEdit" v-model="e.oneMonitorProject"
                                    placeholder="请输入监督项目"></el-input>
                            </el-form-item></td>
                        <td style="width: 35mm;">
                            <el-form-item label-width="0" :prop="`items.${i}.twoMonitorProject`"
                                :rules="rules.twoMonitorProject">
                                <el-input :disabled="$route.query.isEdit" v-model="e.twoMonitorProject"
                                    placeholder="请输入监督项目"></el-input>
                            </el-form-item>
                        </td>
                        <td style="width: 35mm;"> <el-form-item label-width="0" :prop="`items.${i}.threeMonitorProject`"
                                :rules="rules.threeMonitorProject">
                                <el-input :disabled="$route.query.isEdit" v-model="e.threeMonitorProject"
                                    placeholder="请输入监督项目"></el-input>
                            </el-form-item></td>
                        <td style="width: 35mm;"> <el-form-item label-width="0" :prop="`items.${i}.fourMonitorProject`"
                                :rules="rules.fourMonitorProject">
                                <el-input :disabled="$route.query.isEdit" v-model="e.fourMonitorProject"
                                    placeholder="请输入监督项目"></el-input>
                            </el-form-item></td>
                        <td style="width: 35mm;"> <el-form-item label-width="0" :prop="`items.${i}.fiveMonitorProject`"
                                :rules="rules.fiveMonitorProject">
                                <el-input :disabled="$route.query.isEdit" v-model="e.fiveMonitorProject"
                                    placeholder="请输入监督项目"></el-input>
                            </el-form-item></td>
                        <td style="width: 35mm;"> <el-form-item label-width="0" :prop="`items.${i}.sixMonitorProject`"
                                :rules="rules.sixMonitorProject">
                                <el-input :disabled="$route.query.isEdit" v-model="e.sixMonitorProject"
                                    placeholder="请输入监督项目"></el-input>
                            </el-form-item></td>
                        <td style="width: 35mm;"> <el-form-item label-width="0" :prop="`items.${i}.sevenMonitorProject`"
                                :rules="rules.sevenMonitorProject">
                                <el-input :disabled="$route.query.isEdit" v-model="e.sevenMonitorProject"
                                    placeholder="请输入监督项目"></el-input>
                            </el-form-item></td>
                        <td style="width: 35mm;"> <el-form-item label-width="0" :prop="`items.${i}.eightMonitorProject`"
                                :rules="rules.eightMonitorProject">
                                <el-input :disabled="$route.query.isEdit" v-model="e.eightMonitorProject"
                                    placeholder="请输入监督项目"></el-input>
                            </el-form-item></td>
                        <td style="width: 35mm;"> <el-form-item label-width="0" :prop="`items.${i}.nineMonitorProject`"
                                :rules="rules.nineMonitorProject">
                                <el-input :disabled="$route.query.isEdit" v-model="e.nineMonitorProject"
                                    placeholder="请输入监督项目"></el-input>
                            </el-form-item></td>
                        <td style="width: 35mm;"> <el-form-item label-width="0" :prop="`items.${i}.tenMonitorProject`"
                                :rules="rules.tenMonitorProject">
                                <el-input :disabled="$route.query.isEdit" v-model="e.tenMonitorProject"
                                    placeholder="请输入监督项目"></el-input>
                            </el-form-item></td>
                        <td style="width: 35mm;"> <el-form-item label-width="0" :prop="`items.${i}.elevenMonitorProject`"
                                :rules="rules.elevenMonitorProject">
                                <el-input :disabled="$route.query.isEdit" v-model="e.elevenMonitorProject"
                                    placeholder="请输入监督项目"></el-input>
                            </el-form-item></td>
                        <td style="width: 35mm;"> <el-form-item label-width="0" :prop="`items.${i}.twelveMonitorProject`"
                                :rules="rules.twelveMonitorProject">
                                <el-input :disabled="$route.query.isEdit" v-model="e.twelveMonitorProject"
                                    placeholder="请输入监督项目"></el-input>
                            </el-form-item></td>

                    </tr>
                    <tr>
                        <td>监督对象</td>
                        <td style="width: 35mm;">
                            <el-form-item label-width="0" :prop="`items.${i}.oneMonitorUserId`"
                                :rules="rules.oneMonitorUserId">
                                <UserDialogSelection :key="e.oneMonitorUserId" :disabled="$route.query.isInfo || isInfo"
                                    @change="changeOpen1($event, i, 'one')" placeholder="请选择监督对象"
                                    v-model="e.oneMonitorUserId">
                                </UserDialogSelection>
                            </el-form-item>
                        </td>
                        <td style="width: 35mm;">
                            <el-form-item label-width="0" :prop="`items.${i}.twoMonitorUserId`"
                                :rules="rules.twoMonitorUserId">
                                <UserDialogSelection :key="e.twoMonitorUserId" :disabled="$route.query.isInfo || isInfo"
                                    @change="changeOpen1($event, i, 'two')" placeholder="请选择监督对象"
                                    v-model="e.twoMonitorUserId">
                                </UserDialogSelection>
                            </el-form-item>
                        </td>
                        <td style="width: 35mm;">
                            <el-form-item label-width="0" :prop="`items.${i}.threeMonitorUserId`"
                                :rules="rules.threeMonitorUserId">
                                <UserDialogSelection :key="e.threeMonitorUserId" :disabled="$route.query.isInfo || isInfo"
                                    @change="changeOpen1($event, i, 'three')" placeholder="请选择监督对象"
                                    v-model="e.threeMonitorUserId">
                                </UserDialogSelection>
                            </el-form-item>
                        </td>
                        <td style="width: 35mm;">
                            <el-form-item label-width="0" :prop="`items.${i}.fourMonitorUserId`"
                                :rules="rules.fourMonitorUserId">
                                <UserDialogSelection :key="e.fourMonitorUserId" :disabled="$route.query.isInfo || isInfo"
                                    @change="changeOpen1($event, i, 'four')" placeholder="请选择监督对象"
                                    v-model="e.fourMonitorUserId">
                                </UserDialogSelection>
                            </el-form-item>
                        </td>
                        <td style="width: 35mm;">
                            <el-form-item label-width="0" :prop="`items.${i}.fiveMonitorUserId`"
                                :rules="rules.fiveMonitorUserId">
                                <UserDialogSelection :key="e.fiveMonitorUserId" :disabled="$route.query.isInfo || isInfo"
                                    @change="changeOpen1($event, i, 'five')" placeholder="请选择监督对象"
                                    v-model="e.fiveMonitorUserId">
                                </UserDialogSelection>
                            </el-form-item>
                        </td>
                        <td style="width: 35mm;">
                            <el-form-item label-width="0" :prop="`items.${i}.sixMonitorUserId`"
                                :rules="rules.sixMonitorUserId">
                                <UserDialogSelection :key="e.sixMonitorUserId" :disabled="$route.query.isInfo || isInfo"
                                    @change="changeOpen1($event, i, 'six')" placeholder="请选择监督对象"
                                    v-model="e.sixMonitorUserId">
                                </UserDialogSelection>
                            </el-form-item>
                        </td>
                        <td style="width: 35mm;">
                            <el-form-item label-width="0" :prop="`items.${i}.sevenMonitorUserId`"
                                :rules="rules.sevenMonitorUserId">
                                <UserDialogSelection :key="e.sevenMonitorUserId" :disabled="$route.query.isInfo || isInfo"
                                    @change="changeOpen1($event, i, 'seven')" placeholder="请选择监督对象"
                                    v-model="e.sevenMonitorUserId">
                                </UserDialogSelection>
                            </el-form-item>
                        </td>
                        <td style="width: 35mm;">
                            <el-form-item label-width="0" :prop="`items.${i}.eightMonitorUserId`"
                                :rules="rules.eightMonitorUserId">
                                <UserDialogSelection :key="e.eightMonitorUserId" :disabled="$route.query.isInfo || isInfo"
                                    @change="changeOpen1($event, i, 'eight')" placeholder="请选择监督对象"
                                    v-model="e.eightMonitorUserId">
                                </UserDialogSelection>
                            </el-form-item>
                        </td>
                        <td style="width: 35mm;">
                            <el-form-item label-width="0" :prop="`items.${i}.nineMonitorUserId`"
                                :rules="rules.nineMonitorUserId">
                                <UserDialogSelection :key="e.nineMonitorUserId" :disabled="$route.query.isInfo || isInfo"
                                    @change="changeOpen1($event, i, 'nine')" placeholder="请选择监督对象"
                                    v-model="e.nineMonitorUserId">
                                </UserDialogSelection>
                            </el-form-item>
                        </td>
                        <td style="width: 35mm;">
                            <el-form-item label-width="0" :prop="`items.${i}.tenMonitorUserId`"
                                :rules="rules.tenMonitorUserId">
                                <UserDialogSelection :key="e.tenMonitorUserId" :disabled="$route.query.isInfo || isInfo"
                                    @change="changeOpen1($event, i, 'ten')" placeholder="请选择监督对象"
                                    v-model="e.tenMonitorUserId">
                                </UserDialogSelection>
                            </el-form-item>
                        </td>
                        <td style="width: 35mm;">
                            <el-form-item label-width="0" :prop="`items.${i}.elevenMonitorUserId`"
                                :rules="rules.elevenMonitorUserId">
                                <UserDialogSelection :key="e.elevenMonitorUserId" :disabled="$route.query.isInfo || isInfo"
                                    @change="changeOpen1($event, i, 'eleven')" placeholder="请选择监督对象"
                                    v-model="e.elevenMonitorUserId">
                                </UserDialogSelection>
                            </el-form-item>
                        </td>
                        <td style="width: 35mm;">
                            <el-form-item label-width="0" :prop="`items.${i}.twelveMonitorUserId`"
                                :rules="rules.twelveMonitorUserId">
                                <UserDialogSelection :key="e.twelveMonitorUserId" :disabled="$route.query.isInfo || isInfo"
                                    @change="changeOpen1($event, i, 'twelve')" placeholder="请选择监督对象"
                                    v-model="e.twelveMonitorUserId">
                                </UserDialogSelection>
                            </el-form-item>
                        </td>
                    </tr>
                    <tr>
                        <td>监督员</td>
                        <td style="width: 35mm;">
                            <el-form-item label-width="0" :prop="`items.${i}.oneInspectorUserId`"
                                :rules="rules.oneInspectorUserId">
                                <UserDialogSelection :key="e.oneInspectorUserId" :disabled="$route.query.isInfo || isInfo"
                                    @change="changeOpen($event, i, 'one')" placeholder="请选择监督员"
                                    v-model="e.oneInspectorUserId">
                                </UserDialogSelection>
                            </el-form-item>
                        </td>
                        <td style="width: 35mm;">
                            <el-form-item label-width="0" :prop="`items.${i}.twoInspectorUserId`"
                                :rules="rules.twoInspectorUserId">
                                <UserDialogSelection :key="e.twoInspectorUserId" :disabled="$route.query.isInfo || isInfo"
                                    @change="changeOpen($event, i, 'two')" placeholder="请选择监督员"
                                    v-model="e.twoInspectorUserId">
                                </UserDialogSelection>
                            </el-form-item>
                        </td>
                        <td style="width: 35mm;">
                            <el-form-item label-width="0" :prop="`items.${i}.threeInspectorUserId`"
                                :rules="rules.threeInspectorUserId">
                                <UserDialogSelection :key="e.threeInspectorUserId" :disabled="$route.query.isInfo || isInfo"
                                    @change="changeOpen($event, i, 'three')" placeholder="请选择监督员"
                                    v-model="e.threeInspectorUserId">
                                </UserDialogSelection>
                            </el-form-item>
                        </td>
                        <td style="width: 35mm;">
                            <el-form-item label-width="0" :prop="`items.${i}.fourInspectorUserId`"
                                :rules="rules.fourInspectorUserId">
                                <UserDialogSelection :key="e.fourInspectorUserId" :disabled="$route.query.isInfo || isInfo"
                                    @change="changeOpen($event, i, 'four')" placeholder="请选择监督员"
                                    v-model="e.fourInspectorUserId">
                                </UserDialogSelection>
                            </el-form-item>
                        </td>
                        <td style="width: 35mm;">
                            <el-form-item label-width="0" :prop="`items.${i}.fiveInspectorUserId`"
                                :rules="rules.fiveInspectorUserId">
                                <UserDialogSelection :key="e.fiveInspectorUserId" :disabled="$route.query.isInfo || isInfo"
                                    @change="changeOpen($event, i, 'five')" placeholder="请选择监督员"
                                    v-model="e.fiveInspectorUserId">
                                </UserDialogSelection>
                            </el-form-item>
                        </td>
                        <td style="width: 35mm;">
                            <el-form-item label-width="0" :prop="`items.${i}.sixInspectorUserId`"
                                :rules="rules.sixInspectorUserId">
                                <UserDialogSelection :key="e.sixInspectorUserId" :disabled="$route.query.isInfo || isInfo"
                                    @change="changeOpen($event, i, 'six')" placeholder="请选择监督员"
                                    v-model="e.sixInspectorUserId">
                                </UserDialogSelection>
                            </el-form-item>
                        </td>
                        <td style="width: 35mm;">
                            <el-form-item label-width="0" :prop="`items.${i}.sevenInspectorUserId`"
                                :rules="rules.sevenInspectorUserId">
                                <UserDialogSelection :key="e.sevenInspectorUserId" :disabled="$route.query.isInfo || isInfo"
                                    @change="changeOpen($event, i, 'seven')" placeholder="请选择监督员"
                                    v-model="e.sevenInspectorUserId">
                                </UserDialogSelection>
                            </el-form-item>
                        </td>
                        <td style="width: 35mm;"> <el-form-item label-width="0" :prop="`items.${i}.eightInspectorUserId`"
                                :rules="rules.eightInspectorUserId">
                                <UserDialogSelection :key="e.eightInspectorUserId" :disabled="$route.query.isInfo || isInfo"
                                    @change="changeOpen($event, i, 'eight')" placeholder="请选择监督员"
                                    v-model="e.eightInspectorUserId">
                                </UserDialogSelection>
                            </el-form-item></td>
                        <td style="width: 35mm;"> <el-form-item label-width="0" :prop="`items.${i}.nineInspectorUserId`"
                                :rules="rules.nineInspectorUserId">
                                <UserDialogSelection :key="e.nineInspectorUserId" :disabled="$route.query.isInfo || isInfo"
                                    @change="changeOpen($event, i, 'nine')" placeholder="请选择监督员"
                                    v-model="e.nineInspectorUserId">
                                </UserDialogSelection>
                            </el-form-item></td>
                        <td style="width: 35mm;"> <el-form-item label-width="0" :prop="`items.${i}.tenInspectorUserId`"
                                :rules="rules.tenInspectorUserId">
                                <UserDialogSelection :key="e.tenInspectorUserId" :disabled="$route.query.isInfo || isInfo"
                                    @change="changeOpen($event, i, 'ten')" placeholder="请选择监督员"
                                    v-model="e.tenInspectorUserId">
                                </UserDialogSelection>
                            </el-form-item></td>
                        <td style="width: 35mm;"> <el-form-item label-width="0" :prop="`items.${i}.elevenInspectorUserId`"
                                :rules="rules.elevenInspectorUserId">
                                <UserDialogSelection :key="e.elevenInspectorUserId"
                                    :disabled="$route.query.isInfo || isInfo" @change="changeOpen($event, i, 'eleven')"
                                    placeholder="请选择监督员" v-model="e.elevenInspectorUserId">
                                </UserDialogSelection>
                            </el-form-item></td>
                        <td style="width: 35mm;"> <el-form-item label-width="0" :prop="`items.${i}.twelveInspectorUserId`"
                                :rules="rules.twelveInspectorUserId">
                                <UserDialogSelection :key="e.twelveInspectorUserId"
                                    :disabled="$route.query.isInfo || isInfo" @change="changeOpen($event, i, 'twelve')"
                                    placeholder="请选择监督员" v-model="e.twelveInspectorUserId">
                                </UserDialogSelection>
                            </el-form-item></td>
                    </tr>
                    <tr>
                        <td>备注</td>
                        <td style="width: 35mm;"> <el-form-item label-width="0" :prop="`items.${i}.oneRemark`"
                                :rules="rules.oneRemark">
                                <el-input v-model="e.oneRemark" placeholder="请输入备注"></el-input>
                            </el-form-item></td>
                        <td style="width: 35mm;">
                            <el-form-item label-width="0" :prop="`items.${i}.twoRemark`" :rules="rules.twoRemark">
                                <el-input v-model="e.twoRemark" placeholder="请输入备注"></el-input>
                            </el-form-item>
                        </td>
                        <td style="width: 35mm;"> <el-form-item label-width="0" :prop="`items.${i}.threeRemark`"
                                :rules="rules.threeRemark">
                                <el-input v-model="e.threeRemark" placeholder="请输入备注"></el-input>
                            </el-form-item></td>
                        <td style="width: 35mm;"> <el-form-item label-width="0" :prop="`items.${i}.fourRemark`"
                                :rules="rules.fourRemark">
                                <el-input v-model="e.fourRemark" placeholder="请输入备注"></el-input>
                            </el-form-item></td>
                        <td style="width: 35mm;"> <el-form-item label-width="0" :prop="`items.${i}.fiveRemark`"
                                :rules="rules.fiveRemark">
                                <el-input v-model="e.fiveRemark" placeholder="请输入备注"></el-input>
                            </el-form-item></td>
                        <td style="width: 35mm;"> <el-form-item label-width="0" :prop="`items.${i}.sixRemark`"
                                :rules="rules.sixRemark">
                                <el-input v-model="e.sixRemark" placeholder="请输入备注"></el-input>
                            </el-form-item></td>
                        <td style="width: 35mm;"> <el-form-item label-width="0" :prop="`items.${i}.sevenRemark`"
                                :rules="rules.sevenRemark">
                                <el-input v-model="e.sevenRemark" placeholder="请输入备注"></el-input>
                            </el-form-item></td>
                        <td style="width: 35mm;"> <el-form-item label-width="0" :prop="`items.${i}.eightRemark`"
                                :rules="rules.eightRemark">
                                <el-input v-model="e.eightRemark" placeholder="请输入备注"></el-input>
                            </el-form-item></td>
                        <td style="width: 35mm;"> <el-form-item label-width="0" :prop="`items.${i}.nineRemark`"
                                :rules="rules.nineRemark">
                                <el-input v-model="e.nineRemark" placeholder="请输入备注"></el-input>
                            </el-form-item></td>
                        <td style="width: 35mm;"> <el-form-item label-width="0" :prop="`items.${i}.tenRemark`"
                                :rules="rules.tenRemark">
                                <el-input v-model="e.tenRemark" placeholder="请输入备注"></el-input>
                            </el-form-item></td>
                        <td style="width: 35mm;"> <el-form-item label-width="0" :prop="`items.${i}.elevenRemark`"
                                :rules="rules.elevenRemark">
                                <el-input v-model="e.elevenRemark" placeholder="请输入备注"></el-input>
                            </el-form-item></td>
                        <td style="width: 35mm;"> <el-form-item label-width="0" :prop="`items.${i}.twelveRemark`"
                                :rules="rules.twelveRemark">
                                <el-input v-model="e.twelveRemark" placeholder="请输入备注"></el-input>
                            </el-form-item></td>
                    </tr>
                </tbody>
            </table>
            <h4 class="form-header h4" style="margin-top: 20px">附件信息</h4>
            <el-form-item label="" prop="attachmentUrl">
                <FileUpload :isDelete="!$route.query.isInfo" v-model="formData.attachmentUrl"></FileUpload>
            </el-form-item>
            <el-col :span="24" v-if="btnShow">
                <el-form-item label-width="0" style="text-align: center; margin-top: 30px">
                    <el-button v-if="!($route.query.isInfo || isInfo)" type="primary" @click="submitForm(1)">提交</el-button>
                    <el-button v-if="!($route.query.isInfo || isInfo)" type="primary" @click="submitForm(0)">暂存</el-button>
                    <el-button :disabled="false" @click="resetForm">返回</el-button>
                </el-form-item>
            </el-col>
        </el-form>

    </div>
</template>
  
<script>
import {
    updategSupervisionYearPlan,
    supervisionYearPlanAdd,
    supervisionYearPlanInfo,
} from "@/api/quality/supervision/indexPlan.js";
import { deptTreeSelect } from "@/api/system/user.js";
import {
    cultivateYearPlanAdd,
    updategcultivateYearPlan,
    cultivateYearPlanInfo,
} from "@/api/cultivate/yearPlan.js";
import { getDicts } from "@/api/system/dict/data.js";
export default {
    props: {
        isInfo: {
            type: Boolean,
            default: false,
        },
        id: {
            type: String,
            default: "",
        },
        btnShow: {
            type: Boolean,
            default: true,
        },
    },
    components: {},
    dicts: ["sys_in_verification_type"],
    data() {
        return {
            userIdList: [],
            formData: {
                year: null,
                deptId: '',
                deptName: '',
                items: [
                    {
                        deptId: '',
                        deptName: '',
                        oneMonitorProject: '',
                        oneMonitorUserId: '',
                        oneMonitorUserName: '',
                        oneInspectorUserId: '',
                        oneInspectorUserName: '',
                        oneRemark: '',
                        twoMonitorProject: '',
                        twoMonitorUserId: '',
                        twoMonitorUserName: '',
                        twoInspectorUserId: '',
                        twoInspectorUserName: '',
                        twoRemark: '',
                        threeMonitorProject: '',
                        threeMonitorUserId: '',
                        threeMonitorUserName: '',
                        threeInspectorUserId: '',
                        threeInspectorUserName: '',
                        threeRemark: '',
                        fourMonitorProject: '',
                        fourMonitorUserId: '',
                        fourMonitorUserName: '',
                        fourInspectorUserId: '',
                        fourInspectorUserName: '',
                        fourRemark: '',
                        fiveMonitorProject: '',
                        fiveMonitorUserId: '',
                        fiveMonitorUserName: '',
                        fiveInspectorUserId: '',
                        fiveInspectorUserName: '',
                        fiveRemark: '',
                        sixMonitorProject: '',
                        sixMonitorUserId: '',
                        sixMonitorUserName: '',
                        sixInspectorUserId: '',
                        sixInspectorUserName: '',
                        sixRemark: '',
                        sevenMonitorProject: '',
                        sevenMonitorUserId: '',
                        sevenMonitorUserName: '',
                        sevenInspectorUserId: '',
                        sevenInspectorUserName: '',
                        sevenRemark: '',
                        eightMonitorProject: '',
                        eightMonitorUserId: '',
                        eightMonitorUserName: '',
                        eightInspectorUserId: '',
                        eightInspectorUserName: '',
                        eightRemark: '',
                        nineMonitorProject: '',
                        nineMonitorUserId: '',
                        nineMonitorUserName: '',
                        nineInspectorUserId: '',
                        nineInspectorUserName: '',
                        nineRemark: '',
                        tenMonitorProject: '',
                        tenMonitorUserId: '',
                        tenMonitorUserName: '',
                        tenInspectorUserId: '',
                        tenInspectorUserName: '',
                        tenRemark: '',
                        elevenMonitorProject: '',
                        elevenMonitorUserId: '',
                        elevenMonitorUserName: '',
                        elevenInspectorUserId: '',
                        elevenInspectorUserName: '',
                        elevenRemark: '',
                        twelveMonitorProject: '',
                        twelveMonitorUserId: '',
                        twelveMonitorUserName: '',
                        twelveInspectorUserId: '',
                        twelveInspectorUserName: '',
                        twelveRemark: '',
                    },
                ],
            },
            deptOptions: [],
            rules: {
                monitorProject: [
                    {
                        required: true,
                        message: "请输入监督项目",
                        trigger: "blur",
                    },
                ],
                year: [
                    {
                        required: true,
                        message: "请选择年",
                        trigger: "change",
                    },
                ],
                inspectorUserId: [
                    {
                        required: true,
                        message: "请选择监督员",
                        trigger: "blur",
                    },
                ],
                month: [
                    {
                        required: true,
                        message: "请选择月份",
                        trigger: "blur",
                    },
                ],
                remark: [
                    {
                        required: false,
                        message: "请输入备注",
                        trigger: "blur",
                    },
                ],
                monitorUserId: [
                    {
                        required: true,
                        message: "请选择监督对象",
                        trigger: "blur",
                    },
                ],
                deptId: [
                    {
                        required: true,
                        message: "请选择部门",
                        trigger: "change",
                    },
                ],
            },
            deptTreeSelect: [],
            showGroup: false
        };
    },
    computed: {},
    created() {

        this.getDeptTree();
    },
    mounted() { },
    methods: {
        /** 查询部门下拉树结构 */
        getDeptTree() {
            deptTreeSelect().then((response) => {
                this.deptOptions = response.data;
                if (this.$route.query.isEdit || this.$route.query.isEdit1 || this.$route.query.isInfo || this.isInfo) {
                    this.getinfo();
                }
            });
        },
        changeOpen(e, i, f) {
            console.log(e, i, f);
            console.log(f + 'InspectorUserName');
            let idList = []
            let nameList = []
            e.forEach((i) => {
                idList.push(i.userId)
                nameList.push(i.nickName)
            });
            console.log(idList.toString(), 'idList');
            this.formData.items[i][f + 'InspectorUserName'] = nameList.toString()
            this.formData.items[i][f + 'InspectorUserId'] = idList.toString()
            console.log(this.formData.items[i]);

        },
        changeOpen1(e, i, f) {
            console.log(e, i);
            let idList = []
            let nameList = []
            e.forEach((i) => {
                idList.push(i.userId)
                nameList.push(i.nickName)
            });
            console.log(idList.toString(), 'idList');
            // f代表几月份(字段：f+MonitorUserName)
            this.formData.items[i][f + 'MonitorUserName'] = nameList.toString()
            this.formData.items[i][f + 'MonitorUserId'] = idList.toString()
            console.log(this.formData.items[i]);
        },
        // changeCascaderNums(e, i) {
        //     let that = this
        //     console.log(e, i);
        //     console.log(that.$refs["reference" + i][0].checkedValue);
        //     this.showGroup = e.length > 0 ? true : false
        // },
        changeCascaderNums(e, i) {
            console.log(e, i);
            this.showGroup = e.length > 0 ? true : false;
        },
        visibleChange(e, i) {
            console.log(e, this.$refs["reference" + i][0].getCheckedNodes());
            if (!e && this.showGroup) {
                let arr = this.$refs["reference" + i][0].getCheckedNodes();
                console.log(arr);
                let list = [];
                let label = [];
                arr.forEach((item, index) => {
                    list.push(item.value);
                    label.push(item.label);
                });
                console.log(list);
                this.formData.items[i].deptIdReplace = list.toString();
                this.formData.items[i].deptNameReplace = label.toString();
                console.log(this.formData.items[i].deptIdReplace);
                // console.log(this.formData.userList1[i].deptName, 'this.formData.userList1[i].deptId');
            }
        },
        handleAdd() {
            this.formData.items.push({
                deptId: '',
                deptName: '',
                oneMonitorProject: '',
                oneMonitorUserId: '',
                oneMonitorUserName: '',
                oneInspectorUserId: '',
                oneInspectorUserName: '',
                oneRemark: '',
                twoMonitorProject: '',
                twoMonitorUserId: '',
                twoMonitorUserName: '',
                twoInspectorUserId: '',
                twoInspectorUserName: '',
                twoRemark: '',
                threeMonitorProject: '',
                threeMonitorUserId: '',
                threeMonitorUserName: '',
                threeInspectorUserId: '',
                threeInspectorUserName: '',
                threeRemark: '',
                fourMonitorProject: '',
                fourMonitorUserId: '',
                fourMonitorUserName: '',
                fourInspectorUserId: '',
                fourInspectorUserName: '',
                fourRemark: '',
                fiveMonitorProject: '',
                fiveMonitorUserId: '',
                fiveMonitorUserName: '',
                fiveInspectorUserId: '',
                fiveInspectorUserName: '',
                fiveRemark: '',
                sixMonitorProject: '',
                sixMonitorUserId: '',
                sixMonitorUserName: '',
                sixInspectorUserId: '',
                sixInspectorUserName: '',
                sixRemark: '',
                sevenMonitorProject: '',
                sevenMonitorUserId: '',
                sevenMonitorUserName: '',
                sevenInspectorUserId: '',
                sevenInspectorUserName: '',
                sevenRemark: '',
                eightMonitorProject: '',
                eightMonitorUserId: '',
                eightMonitorUserName: '',
                eightInspectorUserId: '',
                eightInspectorUserName: '',
                eightRemark: '',
                nineMonitorProject: '',
                nineMonitorUserId: '',
                nineMonitorUserName: '',
                nineInspectorUserId: '',
                nineInspectorUserName: '',
                nineRemark: '',
                tenMonitorProject: '',
                tenMonitorUserId: '',
                tenMonitorUserName: '',
                tenInspectorUserId: '',
                tenInspectorUserName: '',
                tenRemark: '',
                elevenMonitorProject: '',
                elevenMonitorUserId: '',
                elevenMonitorUserName: '',
                elevenInspectorUserId: '',
                elevenInspectorUserName: '',
                elevenRemark: '',
                twelveMonitorProject: '',
                twelveMonitorUserId: '',
                twelveMonitorUserName: '',
                twelveInspectorUserId: '',
                twelveInspectorUserName: '',
                twelveRemark: '',
            },);
        },
        handleDele(e) {
            if (this.formData.contentList.length == 1) return;
            this.formData.contentList.splice(e, 1);
        },
        getinfo() {
            return supervisionYearPlanInfo(this.$route.query.id || this.id).then((response) => {
                this.formData = response.data;
                this.formData.items.forEach((item, i) => {
                    // item.deptId = Number(item.deptId)
                    item.yearQualityMonitorPlanItemId = null
                    let list1 = [];
                    item.deptIdReplace = item.deptId
                    item.deptNameReplace = item.deptName
                    item.deptId = item.deptId.split(",");
                    item.deptId = item.deptId.map((i) => parseInt(i));
                    item.deptId.map((i) => {
                        list1.push(this.findParentLot(i));
                    });
                    item.deptId = list1;
                    // item.inputText = item.orderContent
                    // item.types = item.orderContent
                    console.log(item.deptId);
                    console.log(item.deptIdReplace);
                });
                this.formData.yearQualityMonitorPlanId = this.$route.query.id
                console.log(this.formData.items);
            });
        },
        // 创建新数组 返回
        findParentLot(id) {
            const arr = [];
            this.deployIdFun(this.deptOptions, id, arr);
            return arr.reverse();
        },
        // 逻辑代码 for循环 判断相同的id 取上级ID
        deployIdFun(options, id, newArr) {
            console.log(options);
            options.forEach((v) => {
                if (v.id === id) {
                    newArr.push(id);
                    console.log(newArr, "newArr");
                    if (!v.parentId || v.parentId !== "0") {
                        this.deployIdFun(this.deptOptions, v.parentId, newArr);
                    }
                } else {
                    if (v.children && v.children.length) {
                        this.deployIdFun(v.children, id, newArr);
                    }
                }
            });
        },
        submitForm(e) {
            this.$refs["elForm"].validate((valid) => {
                if (valid) {
                    let query = JSON.parse(JSON.stringify(this.formData));
                    console.log(query);
                    query.status = e == 0 ? 'draft' : 'audit'
                    console.log(query);
                    let num = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten', 'eleven', 'twelve']
                    query.items.forEach((item, i) => {
                        console.log(item);
                        // console.log(this.$refs["reference" + i][0].getCheckedNodes()[0].pathLabels.pop());
                        // query.items[i].deptId = this.$refs["reference" + i][0].getCheckedNodes()[0].value;
                        // query.items[i].deptName = this.$refs["reference" + i][0].getCheckedNodes()[0].label;
                        // item.monitorUserId = item.monitorUserId.toString();
                        // item.inspectorUserId = item.inspectorUserId.toString();
                        console.log(item.deptIdReplace);
                        item.deptId = item.deptIdReplace;
                        item.deptName = item.deptNameReplace;
                        console.log(item.deptId);
                        num.forEach(lab => {
                            item[lab + 'MonitorUserId'] = item[lab + 'MonitorUserId'] && item[lab + 'MonitorUserId'].toString()
                            item[lab + 'InspectorUserId'] = item[lab + 'InspectorUserId'] && item[lab + 'InspectorUserId'].toString()
                        })
                    })
                    console.log(query);
                    console.log(this.formData.yearQualityMonitorPlanId);
                    if (this.formData.yearQualityMonitorPlanId && this.formData.yearQualityMonitorPlanId != '') {
                        console.log(this.formData.yearQualityMonitorPlanId);
                        updategSupervisionYearPlan(query).then((response) => {
                            this.$modal.msgSuccess("修改成功");
                            this.resetForm();
                        });
                    } else {
                        supervisionYearPlanAdd(query).then((response) => {
                            this.$modal.msgSuccess("新增成功");
                            this.resetForm();
                        });
                    }
                }
            });
        },
        resetForm() {
            this.$tab.closeOpenPage();
        },
    },
};
</script>
  //
<style lang="scss" scoped>
::v-deep .el-form-item {
    margin-top: 20px !important;
}

table {
    border-collapse: collapse;
    /* 移除双边框 */
}

table,
th,
td {
    border: 1px solid black;
}
</style>
  